<!--
 * @Author       : Li Ming Yang
 * @Date         : 2023-11-20 14:39:14
 * @Description  : 按钮导航组件
-->
<template>
  <view class="deco-button-navigation" :style="[innerStyle]">
    <swiper :style="{ height }" @change="onChangeSwiper">
      <swiper-item v-for="(layout, index) in layouts" :key="index">
        <view class="layout-wrap" :style="[layoutStyle]">
          <view v-for="(item, itemIndex) in layout" :key="itemIndex" class="item-wrap" @click="onClickItem(item)">
            <image class="item-image" :src="item.image" />
            <span class="name-text text-ellipsis">{{ item.name }}</span>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view v-if="layouts.length > 1" class="flex justify-center mt-30">
      <view v-for="(item, index) in layouts" :key="index" class="indicator-item" :class="{ 'is-active': swiperIndex == index }"></view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { useStyle, styleSizeUnit } from "@/decoration/utils/style"
export default {
  name: "deco-button-navigation",
  mixins: [mixin],
  data() {
    return {
      style: {},
      height: "auto",
      layouts: [],
      swiperIndex: 0
    }
  },
  computed: {
    layoutStyle() {
      const style = {}
      if (this.data?.data?.col) {
        style["grid-template-columns"] = `repeat(${this.data?.data.col}, 1fr)`
        style["grid-row-gap"] = this.gridLayoutStyle["grid-row-gap"]
      }
      return useStyle(style)
    },
    gridLayoutStyle() {
      return styleSizeUnit(this.data?.layoutStyle)
    }
  },
  mounted() {
    this.handleGenerateLayouts()
  },
  methods: {
    async init() {
      await this.$nextTick()
      const rect = await this.useRect(".layout-wrap")
      if (rect) this.height = rect.height + "px"
    },
    onChangeSwiper(data) {
      this.swiperIndex = data.detail.current
    },
    onClickItem(item) {
      this.useRouteJupm(item)
    },
    async handleGenerateLayouts() {
      const row = this.data.data?.row
      const col = this.data.data?.col
      if (this.data.data?.list?.length) {
        const list = this.from.type === "problem" ? await this.handleProblemItem() : this.data.data.list
        this.layouts = this.chunk(list, row * col)
      } else {
        this.decoWrap?.hide()
      }
      this.init()
    },
    chunk(array, size) {
      const chunkedArray = []
      for (let i = 0; i < array.length; i += size) {
        chunkedArray.push(array.slice(i, i + size))
      }
      return chunkedArray
    },
    // 处理item有问题详情
    async handleProblemItem() {
      const problemInfoItem = this.data.data.list.filter((item) => item.innerType === "problemInfo")
      if (!problemInfoItem.length) return this.data.data.list
      // 校验是否已经禁用
      for (const item of problemInfoItem) {
        const res = await uni.$api.problem.getProblemFitmentInfo({ questionId: item.params.id })
        if (uni.$check.isArray(res)) {
          const index = this.data.data.list.indexOf(item)
          if (index !== -1) this.data.data.list.splice(index, 1)
        }
      }
      return this.data.data.list
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-button-navigation {
  width: 100%;
  padding: 28rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .layout-wrap {
    display: grid;

    .item-wrap {
      display: flex;
      overflow: hidden;
      align-items: center;
      flex-direction: column;
      .item-image {
        width: 100rpx;
        height: 100rpx;
      }

      .name-text {
        color: #333;
        overflow: hidden;
        font-weight: 500;
        padding: 0 15rpx;
        font-size: 24rpx;
        margin-top: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }
  .indicator-item {
    width: 10rpx;
    height: 10rpx;
    margin: 0 12rpx;
    background: #cccccc;
    border-radius: 5rpx;
    &.is-active {
      width: 24rpx;
      height: 10rpx;
      border-radius: 10rpx;
      transition: all 0.3s ease;
      background: linear-gradient(90deg, #ff482a 0%, #ff9059 100%);
    }
  }
}
</style>
